<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header::commonlinks(~{::title},~{::link})">
    <title>收藏夹管理</title>
    <link rel="stylesheet" th:href="@{/admin/type/type.css}">
    <link rel="stylesheet" th:href="@{/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css}">
    <link rel="stylesheet" th:href="@{/plugins/datatables-responsive/css/responsive.bootstrap4.min.css}">
</head>
<body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed">
<div class="wrapper">
    <div th:include="common/header::topnavbar"></div>
    <div th:include="common/header::leftaside(activename='collectCategories')"></div>
<!-- 内容区 -->
    <div class="content-wrapper">
    <!--内容区头部 -->
        <div class="content-header">
            <div class="header">
                <div class="title">收藏夹管理</div>
                <div class="header-btn">
                    <button type="button" data-toggle="modal" data-target="#addmodal" class="btn btn-info"><i
                            class="fas fa-plus"></i> 新增收藏夹
                    </button>
                </div>
            </div>

            <div class="container-fluid">
                <div class="card">
                    <div class="userlist">
                        <table class="table table-striped table-bordered table-hover">
                            <thead class="thead-dark">
                            <tr>
                                <td>编号</td>
                                <td>收藏夹名称</td>
                                <td>文章数</td>
                                <td>前台是否显示</td>
                                <td>操作</td>
                            </tr>
                            </thead>
                            <tbody class="listbody">
                            </tbody>

                        </table>

                    </div>
                    <!--                   分页 -->
                    <div id="pagination"></div>
                </div>

            </div><!-- /.container-fluid -->
        </div>
    <!-- /内容区头部 -->

        <!--        修改模态框-->
        <div id="editmodal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="msgModalLabel"
             aria-hidden="true">
            <form class="needs-validation validateForm editdataForm" novalidate>
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="msgModalLabel">修改收藏夹分类类型</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group d-flex">
                                <input style="display: none" type="text" name="id">
                                <label class="col-sm-3 control-label" style="display: none">编号：</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control " style="display: none" name="userId">
                                </div>
                            </div>

                            <div class="form-group d-flex">
                                <label class="col-sm-3 control-label">收藏夹类名：</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control " name="name" disabled required autofocus="">
                                </div>
                                <div class="invalid-feedback">
                                    收藏夹类名不能为空
                                </div>
                            </div>

                            <div class="form-group d-flex">
                                <label class="col-sm-3 control-label">前台是否显示：</label>
                                <!--<div class="col-sm-8">-->
                                <!--<input type="text" class="form-control " name="show">-->
                                <!--</div>-->
                                <div class="article-show">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="show" id="articcomment1"
                                               value="true" checked>
                                        <label class="form-check-label" for="articcomment1">
                                            开启前台显示
                                        </label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="show" id="articcomment2"
                                               value="false">
                                        <label class="form-check-label" for="articcomment2">
                                            关闭前台显示
                                        </label>
                                    </div>
                                </div>

                            </div>

                            <div class="form-group d-flex">
                                <label class="col-sm-3 control-label">文章分类简介：</label>
                                <div class="col-sm-8">
                                <textarea class="form-control " rows="3" maxlength="300" name="content"
                                          style="resize: none"
                                          placeholder="收藏夹分类简介"></textarea>
                                    <span id="word">0</span><span>/300</span>
                                </div>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="submit" class="btn btn-primary valid-button editbtn" data-dismiss="modal">
                                提交更改
                            </button>
                        </div>
                    </div><!-- /.modal-content -->
                </div>
            </form>
        </div>
        <!--        删除确定框-->
        <div id="delmodal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="deleModalLabel"
             aria-hidden="true">
            <form class="needs-validation validateForm" novalidate>
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="deleModalLabel">确认删除</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        </div>
                        <div class="modal-body">
                            <div class="delebody"><i class="fa-exclamation-circle fas"></i>删除后将无法恢复，确定吗</div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-info" data-dismiss="modal"><i class="fas fa-meh">我再想想</i>
                                </button>
                                <button type="submit" class="btn btn-primary valid-button delebtn"><i
                                        class="fas fa-check">狠心确定</i></button>
                            </div>
                        </div><!-- /.modal-content -->
                    </div>
                </div>
            </form>
        </div>

        <!--        增加收藏夹类型模态框-->
        <div id="addmodal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="addmodallabel"
             aria-hidden="true">
            <form class="needs-validation validateForm adddataForm" novalidate th:messageVo="${CollectCreateVO}">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="addmodallabel">添加收藏夹类型</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        </div>
                        <div class="modal-body">
                            <div class="input-group mb-3">
                                <input type="text" class="form-control" name="name" placeholder="收藏夹类型" required>
                                <div class="input-group-append">
                                    <div class="input-group-text">
                                        <span class="fas fa-user"></span>
                                    </div>
                                </div>
                                <div class="invalid-feedback ">
                                    收藏夹类型不能为空
                                </div>
                            </div>
                            <div class="article-show">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="show" id="articcomment1"
                                           value="true" checked>
                                    <label class="form-check-label" for="articcomment1">
                                        开启前台显示
                                    </label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="show" id="articcomment2"
                                           value="false">
                                    <label class="form-check-label" for="articcomment2">
                                        关闭前台显示
                                    </label>
                                </div>
                            </div>

                            <div class="input-group mb-3">
                                <textarea id="admincontent" class="form-control" rows="3" maxlength="300" name="content"
                                          style="resize: none"
                                          placeholder="类型简介"></textarea>
                                <br>
                                <span id="adminword">0</span><span>/300</span>

                            </div>


                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="submit" class="btn btn-primary valid-button addbtn">确认</button>
                        </div>
                    </div><!-- /.modal-content -->
                </div>
            </form>
        </div>
</div>
<!-- /内容区 -->
<!-- 右侧栏 -->
    <div th:include="~{common/header::rightaside}"></div>
<!-- /右侧栏 -->
<!-- 底部栏 -->
    <div th:include="~{common/footer::footer}"></div>
<!--所有js必须放在jq下面-->
    <div th:replace="common/header::commonjs(~{::script})">
    <!--        私有的js-->
        <script th:src="@{/plugins/pagination/jquery.pagination.js}"></script>
    <script th:src="@{/admin/collect/index.js} " th:inline="javascript"></script>
    </div>
</div>
</body>
</html>